<!DOCTYPE html>
<html>
<head>
    <title>图片测试页面</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .image-item {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        .image-item img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>图片资源测试</h1>
        <div id="images-container"></div>
    </div>

    <script>
        // 从后端API获取图片数据
        fetch('http://127.0.0.1:8000/api/services/app-images/')
            .then(response => response.json())
            .then(data => {
                const container = document.getElementById('images-container');
                
                // 显示轮播图
                if (data.banners && data.banners.length > 0) {
                    const bannerSection = document.createElement('div');
                    bannerSection.innerHTML = '<h2>轮播图</h2>';
                    const bannerGrid = document.createElement('div');
                    bannerGrid.className = 'image-grid';
                    
                    data.banners.forEach(banner => {
                        const item = document.createElement('div');
                        item.className = 'image-item';
                        item.innerHTML = `
                            <img src="${banner.image}" alt="${banner.title}">
                            <h3>${banner.title}</h3>
                            <p>${banner.description}</p>
                        `;
                        bannerGrid.appendChild(item);
                    });
                    
                    bannerSection.appendChild(bannerGrid);
                    container.appendChild(bannerSection);
                }
                
                // 显示服务分类图标
                if (data.categories && data.categories.length > 0) {
                    const categorySection = document.createElement('div');
                    categorySection.innerHTML = '<h2>服务分类</h2>';
                    const categoryGrid = document.createElement('div');
                    categoryGrid.className = 'image-grid';
                    
                    data.categories.forEach(category => {
                        const item = document.createElement('div');
                        item.className = 'image-item';
                        item.innerHTML = `
                            <img src="${category.icon}" alt="${category.name}">
                            <h3>${category.name}</h3>
                        `;
                        categoryGrid.appendChild(item);
                    });
                    
                    categorySection.appendChild(categoryGrid);
                    container.appendChild(categorySection);
                }
                
                // 显示技师头像
                if (data.technicians && data.technicians.length > 0) {
                    const technicianSection = document.createElement('div');
                    technicianSection.innerHTML = '<h2>技师</h2>';
                    const technicianGrid = document.createElement('div');
                    technicianGrid.className = 'image-grid';
                    
                    data.technicians.forEach(technician => {
                        const item = document.createElement('div');
                        item.className = 'image-item';
                        item.innerHTML = `
                            <img src="${technician.avatar}" alt="${technician.name}">
                            <h3>${technician.name}</h3>
                            <p>评分: ${technician.rating} | 接单: ${technician.order_count}</p>
                        `;
                        technicianGrid.appendChild(item);
                    });
                    
                    technicianSection.appendChild(technicianGrid);
                    container.appendChild(technicianSection);
                }
                
                // 显示服务图片
                if (data.services && data.services.length > 0) {
                    const serviceSection = document.createElement('div');
                    serviceSection.innerHTML = '<h2>服务项目</h2>';
                    const serviceGrid = document.createElement('div');
                    serviceGrid.className = 'image-grid';
                    
                    data.services.forEach(service => {
                        const item = document.createElement('div');
                        item.className = 'image-item';
                        item.innerHTML = `
                            <img src="${service.image}" alt="${service.name}">
                            <h3>${service.name}</h3>
                            <p>时长: ${service.duration}分钟</p>
                            <p>价格: ¥${service.price} (原价: ¥${service.original_price})</p>
                        `;
                        serviceGrid.appendChild(item);
                    });
                    
                    serviceSection.appendChild(serviceGrid);
                    container.appendChild(serviceSection);
                }
            })
            .catch(error => {
                console.error('获取图片数据失败:', error);
                document.getElementById('images-container').innerHTML = '<p>获取图片数据失败，请检查后端服务是否正常运行。</p>';
            });
    </script>
</body>
</html>